<template>
  <tr class="room-timeline-slot">
    <td class="time-slot">{{ timeSlot }}</td>
    <td class="status-cell">
      <template v-if="statusData.type === 'available'">
        <span class="status-text available">空闲</span>
      </template>
      <template v-else-if="statusData.type === 'pending-payment'">
        <div class="status-block pending-payment">
          <strong>已预约未支付</strong>
          <div>订单ID: {{ statusData.bookingInfo.orderId }}</div>
          <div>({{ formatTime(statusData.bookingInfo.startTime) }} - {{ formatTime(statusData.bookingInfo.endTime) }})</div>
        </div>
      </template>
      <template v-else-if="statusData.type === 'booked'">
        <div class="status-block booked">
          <strong>已支付未使用</strong>
          <div>订单ID: {{ statusData.bookingInfo.orderId }}</div>
          <div>({{ formatTime(statusData.bookingInfo.startTime) }} - {{ formatTime(statusData.bookingInfo.endTime) }})</div>
        </div>
      </template>
      <template v-else-if="statusData.type === 'in-use'">
        <div class="status-block in-use">
          <strong>已支付使用中</strong>
          <div>订单ID: {{ statusData.bookingInfo.orderId }}</div>
          <div>({{ formatTime(statusData.bookingInfo.startTime) }} - {{ formatTime(statusData.bookingInfo.endTime) }})</div>
        </div>
      </template>
      <template v-else-if="statusData.type === 'maintenance'">
        <div class="status-block maintenance">
          <strong>维护中</strong>
          <div>维护ID: {{ statusData.maintenanceInfo.maintenanceId }}</div>
          <div>({{ formatTime(statusData.maintenanceInfo.startTime) }} - {{ formatTime(statusData.maintenanceInfo.endTime) }})</div>
        </div>
      </template>
      <template v-else>
        <span class="status-text unknown">未知状态</span>
      </template>
    </td>
    <td class="action-cell">
      <template v-if="statusData.type === 'booked'">
        <button class="btn-action btn-set-in-use" @click="handleSetInUse(statusData.bookingInfo)">设为使用中</button>
      </template>
      <template v-else-if="statusData.type === 'in-use'">
        <button class="btn-action btn-end-use" @click="handleEndUse(statusData.bookingInfo)">结束使用</button>
      </template>
      <template v-else>
        <!-- No actions for other statuses as per user's request -->
      </template>
    </td>
  </tr>
</template>

<script setup>
defineProps({
  timeSlot: {
    type: String,
    required: true
  },
  statusData: {
    type: Object,
    required: true,
    // Expected statusData structure from SingleRoomTimelinePage.vue:
    // { type: 'available' }
    // { type: 'pending-payment', bookingInfo: { orderId, userId, roomname, startTime, endTime, paymentStatus } }
    // { type: 'booked', bookingInfo: { orderId, userId, roomname, startTime, endTime, paymentStatus } }
    // { type: 'in-use', bookingInfo: { orderId, userId, roomname, startTime, endTime, paymentStatus } }
    // { type: 'maintenance', maintenanceInfo: { maintenanceId, roomname, startTime, endTime, paymentStatus } }
    // { type: 'unknown' }
  }
});

const formatTime = (isoString) => {
  if (!isoString) return '';
  const date = new Date(isoString);
  return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

import { setOrderStatus } from '@/apis/orders';

defineEmits([
  'set-in-use',
  'end-use'
]);

const handleSetInUse = async (bookingInfo) => {
  try {
    const response = await setOrderStatus(bookingInfo.orderId, 5); // 5: 已支付使用中
    if (response.code === 200) {
      alert('状态更新成功: 已支付使用中');
      location.reload(); // Simple refresh for demonstration
    } else {
      alert(`状态更新失败: ${response.msg}`);
    }
  } catch (error) {
    alert(`状态更新时发生错误: ${error.message}`);
    console.error('Error setting status to in-use:', error);
  }
};

const handleEndUse = async (bookingInfo) => {
  try {
    const response = await setOrderStatus(bookingInfo.orderId, 6); // 6: 已完成 (assuming 6 is completed based on setOrderStatus doc)
    if (response.code === 200) {
      alert('状态更新成功: 已完成');
      location.reload(); // Simple refresh for demonstration
    } else {
      alert(`状态更新失败: ${response.msg}`);
    }
  } catch (error) {
    alert(`状态更新时发生错误: ${error.message}`);
    console.error('Error setting status to completed:', error);
  }
};
</script>

<style scoped>
.room-timeline-slot {
  border-bottom: 1px solid #eee; /* Subtle separator between rows */
}

.time-slot {
  width: 120px;
  font-weight: 600; /* Slightly bolder */
  color: #555; /* Softer black */
  padding: 10px 15px; /* More padding */
  vertical-align: top; /* Align to top for multi-line content */
}

.status-cell {
  padding: 10px 15px; /* Consistent padding */
  vertical-align: top;
}

.status-text {
  font-weight: 600;
  padding: 5px 10px; /* Add padding for available status */
  border-radius: 4px;
  display: inline-block; /* Allow padding and background */
}

.status-block {
  padding: 12px 15px; /* Increased padding */
  border-radius: 8px; /* More rounded corners */
  margin-bottom: 8px; /* More space between blocks if multiple */
  border-left: 6px solid; /* Thicker left border */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* Subtle shadow */
  line-height: 1.5; /* Better line spacing */
}

.status-block strong {
  font-size: 1.1em; /* Slightly larger heading */
  display: block; /* Ensure it takes its own line */
  margin-bottom: 5px; /* Space below heading */
}

.status-block br {
  display: none; /* Remove default br, use margin/padding for spacing */
}

.status-block span {
  display: block; /* Make each line a block for better spacing */
  font-size: 0.9em; /* Slightly smaller text for details */
  color: inherit; /* Inherit color from parent block */
}

.available {
  color: #28a745; /* Green */
}

.available {
  background-color: #e6ffe6; /* Very light green */
  color: #28a745; /* Green */
  border-color: #28a745;
}

.pending-payment {
  background-color: #fff8e1; /* Softer light yellow */
  color: #ffa000; /* Orange-yellow */
  border-color: #ffc107;
}

.booked {
  background-color: #e0f7fa; /* Softer light blue */
  color: #00796b; /* Teal */
  border-color: #00bcd4;
}

.in-use {
  background-color: #ffebee; /* Softer light red */
  color: #d32f2f; /* Darker red */
  border-color: #f44336;
}

.maintenance {
  background-color: #eceff1; /* Softer light gray */
  color: #455a64; /* Darker gray */
  border-color: #607d8b;
}

.unknown {
  color: #6c757d; /* Gray */
}

.action-cell {
  padding: 10px 15px;
  vertical-align: top;
  text-align: right; /* Align buttons to the right */
}

.action-cell button {
  font-size: 0.85em; /* Slightly larger font */
  padding: 8px 12px; /* More padding */
  margin-left: 8px; /* Space between buttons */
  cursor: pointer;
  border: none;
  border-radius: 5px; /* More rounded corners */
  white-space: nowrap;
  transition: background-color 0.2s ease; /* Smooth transition */
}

.btn-action {
  color: white;
}

.btn-action:hover {
  filter: brightness(1.1); /* Slightly brighter on hover */
}

.btn-set-in-use {
  background-color: #007bff; /* Primary blue */
}

.btn-end-use {
  background-color: #dc3545; /* Danger red */
}

/* Keep these for potential future use or if they are used elsewhere */
.btn-set-maintenance {
  background-color: #ffc107; /* Warning yellow */
  color: #212529;
}

.btn-cancel-maintenance {
  background-color: #28a745; /* Success green */
}
</style>
